<!-- eslint-disable vue/multi-word-component-names -->
<template>
    <div id="mainTemperature" style="width: 25vw;height:30vh;"></div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import { onMounted } from 'vue';
import axios from 'axios';
onMounted(() => {
    var chartDom = document.getElementById('mainTemperature');
    var myChart = echarts.init(chartDom);
 myChart = echarts.init(document.getElementById('mainTemperature'));
  window.addEventListener('resize', function() {
    myChart.resize();
  });
    var option;
    let data1: any[] = []
    let data2: any[] = []
    let data3: any[] = []
    
    const key = 'ff49151266390899e6b1c15afcbae82b'
    axios.get(`https://restapi.amap.com/v3/weather/weatherInfo?key=${key}&city=110000&extensions=all`).then(res => {
       
        let casts = res.data.forecasts[0].casts
        casts.forEach((item: any) => {
            data1.push(item.date.substring(5, 10))
            data2.push(item.daytemp.toString())
            data3.push(item.nighttemp.toString())
        })
    
    }).catch(err => {
        console.log(err)
    })

    setTimeout(() => {
        option = {
  title: {
    text: '近四日天气变化'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {},

  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: data1,
    axisLabel:{
      textStyle:{
        color:"#fff"
      }
    }
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      formatter: '{value}°C',
      textStyle:{
        color:"#fff"
      }
    }
  },
  series: [
    {
      name: 'Highest',
      type: 'line',
      data: data2,
      markPoint: {
        data: [
          { type: 'max', name: 'Max' },
          { type: 'min', name: 'Min' }
        ]
      },
      markLine: {
        data: [{ type: 'average', name: 'Avg' }]
      }
    },
    {
      name: 'Lowest',
      type: 'line',
      data: data3,
     markPoint: {
        data: [
          { type: 'max', name: 'Max' },
          { type: 'min', name: 'Min' }
        ]
      },
      markLine: {
        data: [
          { type: 'average', name: 'Avg' },
          [
            {
              symbol: 'none',
              x: '90%',
              yAxis: 'max'
            },
            {
              symbol: 'circle',
              label: {
                position: 'start',
                formatter: 'Max'
              },
              type: 'max',
              name: '最高点'
            }
          ]
        ]
      }
    }
  ]
};

option && myChart.setOption(option);
    }, 2000)
})

</script>